<template>
<!-- 理赔记录 -->
  <div class="divBox">
    <el-card class="box-card">
      <div :style="$cssStyle.headLine">
        {{ this.$route.meta.title }}
      </div>

      <!-- 搜索框 -->
      <div class="flex">
        <div class="case">
            <el-form inline class="search">
                <el-form-item>
                  <div style="display:flex; justify-content:space-between;">
                    <el-input style="width: 250px;" v-model="listPram.keyWord" placeholder="请输入订单号、收件人名称">
                    </el-input>
                    <el-button :loading="loading" type="primary" style="background-color: rgba(255, 195, 0, 1);border-color:rgba(255, 195, 0, 1);border-radius: 3px;"
                      @click="getTableList" icon="el-icon-search">
                      搜索</el-button>
                  </div>
                </el-form-item>
            </el-form>
        </div>
        <!-- 搜索框 -->
        <!-- 删除按钮 -->
        <div class="btn">
            <el-button type="info" class="delete">删除</el-button>
        </div>
        <!-- 删除按钮 -->
      </div>

      <!-- 表格 -->
        <el-table
          ref="tableData" 
          v-loading="loading" 
          :data="listData.list" 
          highlight-current-row
          :header-cell-style="{ background: 'rgba(255, 240, 214, 1)' }"
          style="width:100%;"
          :row-style="({ row, rowIndex }) => { return { background: 'rgba(255, 255, 255, 1)' } }"
          class="table"
        >
            <el-table-column
              type="selection"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="number"
              label="理赔单号"
              align="center"
              show-overflow-tooltip
            >
              <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
            </el-table-column>
            <el-table-column
              prop="name"
              label="客户名称"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
                prop="type"
                label="理赔类型"
                align="center"
                show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
                prop="number1"
                label="平台单号"
                align="center"
                show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
                prop="money"
                label="物流理赔金额"
                align="center"
                show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
                prop="detail"
                label="理赔详情"
                align="center"
                show-overflow-tooltip
            >
                <template slot-scope="scope">
                    <div class="looks" @click="look(scope.row.wid)">查看明细</div>
                </template>
            </el-table-column>
        </el-table>
      <!-- 表格 -->

      <!-- 分页 -->
      <el-pagination
        :current-page="listPram.page"
        :page-sizes="constants.page.limit"
        :layout="constants.page.layout"
        :total="listData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
      <!-- 分页 -->
    </el-card>

    <!-- 理赔详情卡片 -->
    <el-card class="box-card" v-if="(getTableList === 1)">
        <div class="inventory">
            <div class="attr-title">
                理赔详情
            </div>
        </div>
    </el-card>
    <!-- 理赔详情卡片 -->
  </div>
  <!-- 理赔记录 -->
</template>

<script>
import * as roleApi from '@/api/role.js'
export default {
  name: "ClaimsSend",
  data() {
    return {
      // Nav导航栏默认在第一个
      activeIndex: '1',
      //获取定义的常量
      constants: this.$constants,
      //表格数据
      // listData: { list: [{name:'静态页面'}] },
      listData: {
        list:[
          {
            number: 'LPDH202210250001',
            name:'华硕科技桦叶店',
            type: '全部遗失',
            number1: 'HYWL202210250001',
            money: '￥360',
            detail: '查看详情',
          },
          {
            number: 'LPDH202210250001',
            name:'华硕科技桦叶店',
            type: '全部遗失',
            number1: 'HYWL202210250001',
            money: '￥360',
            detail: '查看详情',
          },
          {
            number: 'LPDH202210250001',
            name:'华硕科技桦叶店',
            type: '全部遗失',
            number1: 'HYWL202210250001',
            money: '￥360',
            detail: '查看详情',
          },
          {
            number: 'LPDH202210250001',
            name:'华硕科技桦叶店',
            type: '全部遗失',
            number1: 'HYWL202210250001',
            money: '￥360',
            detail: '查看详情',
          },
          {
            number: 'LPDH202210250001',
            name:'华硕科技桦叶店',
            type: '全部遗失',
            number1: 'HYWL202210250001',
            money: '￥360',
            detail: '查看详情',
          },
        ]
      },
      //提交参数
      listPram: {
        keyWord: null,
        page: 1,
        limit: this.$constants.page.limit[0],
      },
      //多选
      menuList: [],
      loading: false,
    }
  },
  created() {
    //this.type = parseInt(this.$route.params.type);
    //this.listPram.type = parseInt(this.$route.params.type)
  },
  mounted() {
    this.getTableList()
  },
  methods: {
    //获取表格分页数据
    getTableList() {
      /*
      this.loading = true      
      roleApi.roleGetPageList(this.listPram).then(res => {
        this.listData = res.data
        this.loading = false
      }).catch((err) => {
        this.loading = false
        this.$message.error(err.msg)
      })
      */
    },
    //改变每页行数
    handleSizeChange(val) {
      this.listPram.limit = val
      this.getTableList(this.listPram)
    },
    //改变页数
    handleCurrentChange(val) {
      this.listPram.page = val
      this.getTableList(this.listPram)
    },
    // 查看明细
    look(id) {
        this.$router.push({
            path: '/financial/detail',
            query: {
                wid: id
            }
        });
        }
  }
}
</script>

<style lang="scss" scoped>
.line{
  margin-bottom: 8px;
}
.paystatus{
  margin-right: 17px;
}
.nav{
  display: flex;
  align-items: center;
  .text1{
    flex: 0 0 100px;
  }
  .el-menu-demo{
    flex: 1;
  }
}
.text1{
  display: inline-block;
}
.search{
  left: 262px;
  top: 235px;
  width: 360px;
  height: 32px;
  opacity: 1;
  border-radius: 2px;
  background: rgba(255, 255, 255, 1);
  /* border: 1px solid rgba(217, 217, 217, 1); */
}
.table{
  margin-top: 8px;
}
el-table-column{
  font-size: 12px;
  color: rgba(112, 112, 112, 1);
  text-align: left;
  vertical-align: middle;
}
.flex{
    display: flex;
    justify-content: space-between;
}
.inventory {
    width: 100%;

    .attr-title {
        font-size: 20px;
        font-weight: 600;
        text-align: center;
        margin: 30px 0;
    }
}
.looks {
    color: rgba(42, 130, 228, 1);
    cursor: pointer;
}
</style>
